<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可以用box-shadow属性为盒子添加阴影 
    语法：box-shadow:h-shadow 水平阴影的位置，允许负值
                     v-shadow 垂直阴影的位置，允许负值
                     blur     可选，模糊距离
                     spread   可选，阴影的尺寸
                     color     可选  阴影的颜色
                     inset     可选  将外部阴影改为内部阴影
    -->
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: rebeccapurple;
                margin: 100px auto;
                
                /* box-shadow: 10px 10px; */
            }
                /* 原先盒子没有影子，鼠标经过添加阴影效果 */
                div:hover{
                    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3) ; ;
                }
        </style>
</head>
<body>
     <div>

     </div>
</body>
</html>